<template>
  <div class="brandlist">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <div class="content">
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="onInfo(item)"
      >
        <img :src="item.picUrl" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <van-action-sheet v-model="show" title="品牌详情">
      <div class="show">
        <van-card
          :price="info.floorPrice | Price"
          :desc="info.desc"
          :title="info.name"
          :thumb="info.picUrl"
        />
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { DropdownMenu, DropdownItem, ActionSheet, Card } from "vant";
import API from "@/utils/api.js";
export default {
  name: "BrandLsit",
  data() {
    return {
      value1: 0,
      value2: "a",
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      list: [],
      show: false,
      info:{}
    };
  },
  created() {
    this.$get(API.GET_BRAND_LIST).then((res) => {
      console.log(res.data);
      this.list = res.data.list;
    });
  },
  methods: {
    onInfo(item) {
      this.$get(API.GET_BRAND_DETAIL, {
        id: item.id,
      }).then((res) => {
        console.log(res);
        this.info = res.data
        this.show = true;
      });
    },
  },
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [ActionSheet.name]: ActionSheet,
    [Card.name]: Card,
  },
  filters: {
    Price: (value) => {
      return value + ".00";
    },
  },
};
</script>

<style lang="less" scoped>
.brandlist {
  margin-top: 46px;
  .content {
    width: 90%;
    margin: 18px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 10px 0;
      img {
        width: 160px;
        height: 120px;
        border-radius: 6px;
      }
      span {
        margin-top: 4px;
      }
    }
  }
  .show {
    padding: 16px 0px 160px;
  }
  .van-card__price {
    color: rgb(238, 74, 74);
  }
}
</style>